<template>
	<Header />
	<Sidebar />
	<div class="content-box" :class="{ 'content-collapse': sidebar_status.collapse }">
		<Tags />
		<div class="content" >
			<router-view v-slot="{ Component }">
				<transition name="move" mode="out-in">
					<keep-alive :include="tags_status.nameList">
						<component :is="Component"></component>
					</keep-alive>
				</transition>
			</router-view>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useSidebarStore } from '../store/sidebar';
import { useTagsStore } from '../store/tags';
import Sidebar from "../components/sidebar.vue";
import Header from "../components/header.vue"
import Tags from "../components/tags.vue"

const sidebar_status = useSidebarStore();
const tags_status = useTagsStore();
</script>
<style>
.content {
  height: auto;
}
</style>
